<template>
<div>
  <!-- 上方搜索框 -->
 <el-form :inline="true" :model="formInline" class="demo-form-inline">
  <el-form-item label="角色名称：">
    <el-input v-model="formInline.rname" placeholder="请输入角色名称"></el-input>
  </el-form-item>
  <el-form-item label="权限字符：">
    <el-input v-model="formInline.aid" placeholder="请输入权限字符"></el-input>
  </el-form-item>
  <!-- 状态选择器 -->
  <el-select v-model="value" placeholder="状态">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <br/>
   <el-form-item label="创建时间：">
     <el-date-picker
      v-model="formInline.gmt_create"
      type="datetime"
      placeholder="选择日期时间"
      default-time="12:00:00">
    </el-date-picker>
  </el-form-item>
  <el-form-item label="修改时间：">
     <el-date-picker
      v-model="formInline.gmt_modified"
      type="datetime"
      placeholder="选择日期时间"
      default-time="16:00:00">
    </el-date-picker>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
    <el-button type="primary" icon="el-icon-refresh" @click="fromline" plain>重置</el-button>
  </el-form-item>
  <div >
  <el-button  type="primary" icon="el-icon-plus"  @click="dialogVisible_role = true">添加角色</el-button>
  </div>
</el-form>

<!-- 添加角色弹窗-->
    <el-dialog title="添加角色" :visible.sync="dialogVisible_role" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色名">
          <el-input v-model="form.rname" placeholder="请输入角色名"></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.aid" placeholder="请输入权限字符"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_role = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_role = false;addRole()">确 定</el-button>
      </span>
    </el-dialog>

<!-- 正文列表 -->
<el-table
      :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      style="width: 100%">
      <el-table-column 
      type="selection" width="45">
      </el-table-column>
      <el-table-column
        type="index"
        label="角色编号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="rname"
        label="角色名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="aid"
        label="权限字符">
      </el-table-column>
       <el-table-column
        prop="state"
        label="状态">
      </el-table-column>
       <el-table-column
        prop="gmt_create"
        label="创建时间" width="200">
      </el-table-column>
      <el-table-column
        prop="gmt_modified"
        label="修改时间" width="200">
      </el-table-column>
      <el-table-column
        prop="handle"
        label="操作">
        <template slot-scope="scope">
		<el-button  type="text" size="small"  @click="dialogVisible_revise = true">修改</el-button>
    <el-button  type="text" size="small"  @click="open_delete">删除</el-button>

    <!-- 修改按钮弹窗，修改后自动录入修改时间，创建时间不变 -->
    <el-dialog title="修改" :visible.sync="dialogVisible_revise" width="30%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="角色编号">
          <el-input v-model="form.rname" placeholder="请输入角色编号"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="form.aid" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="权限字符">
          <el-input v-model="form.rname" placeholder="请输入权限字符"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible_revise = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible_revise = false;reviseSuccess()">确 定</el-button>
      </span>
    </el-dialog>

		</template>
      </el-table-column>
</el-table>
<!-- 分页功能 -->
 <div class="block" style="margin-top:15px;">
            <el-pagination align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange" 
            :current-page="currentPage" 
            :page-sizes="[5,10,20,50]" 
            :page-size="pageSize" 
            layout="total, sizes, prev, pager, next, jumper" 
            :total="tableData.length">
            </el-pagination>
        </div>


</div>
</template>
<script>
export default {
      data() {
      return {
        formInline: {
          rid: '',
          rname: '',
          aid: '',
          state:'',
          gmt_create:'',
          gmt_modified:'',
          currentPage: 4
        },
        dialogVisible_role:false,
        dialogVisible_revise:false,
        form: {
          name: '',
          number:''
        },options: [{
          value: '选项1',
          label: '正常'
        }, {
          value: '选项2',
          label: '停用'
        }],
        value: '',
        tableData: [{
          rid:'1',
          rname: '管理员',
          aid: 'admin',
          state:'正常',
          gmt_create:'2012-06-12 12:25:16',
          gmt_modified:'2012-06-25 15:15:18',
          handle:''
          }, {
          rid:'2',
          rname: '研发人员',
          aid: 'common',
          state:'正常',
          gmt_create:'2012-06-12 12:25:16',
          gmt_modified:'2012-06-25 15:15:18',
          handle:''
          }, {
          rid:'3',
          rname: '项目主管',
          aid: 'supervisor',
          state:'正常',
          gmt_create:'2012-06-12 12:25:16',
          gmt_modified:'2012-06-25 15:15:18',
          handle:''
          }, {
          rid:'4',
          rname: '项目经理',
          aid: 'manager',
          state:'正常',
          gmt_create:'2012-06-12 12:25:16',
          gmt_modified:'2012-06-25 15:15:18',
          handle:''
          }],
          currentPage: 1, // 当前页码
          total: 20, // 总条数
          pageSize: 5 // 每页的数据条数
      }
    },
    methods: {
       // 删除按钮弹窗及提示
     open_delete() {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      // 修改成功提示
      reviseSuccess() {
        this.$message({
          type: 'success',
          message: '修改成功'
        })
      },
      // 创建成功提示
      addRole() {
          this.$message({
          type: 'success',
          message: '创建成功'
        })
      },
      onSubmit() {
        console.log('submit!');
      },
      changeUser(userid){
        console.log(userid)
      },
      deleteUser(userid){
        console.log(userid)
      },
       //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
     console.log(`每页 ${val} 条`);
     this.currentPage = 1;
    this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
     handleCurrentChange(val) {
     console.log(`当前页: ${val}`);
     this.currentPage = val;
    }
    }
}
</script>
<style>
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>